
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		.div3{
				width: 100px;
			  height: 100px;
				border: 1px solid red;
			 	overflow: hidden;
		}
		 .div4{
		 	height: 100px;
		 	background-color: yellow;
		 }
		 #div5{
		 	height: 100px;
		 	width:100px;
		 	border: 1px solid yellowgreen;
		 	display: table;  
		  
		 }
			 
		</style>
	</head>
	<body>
		<!-- 对于子元素 超出部分的解决方案：
			  1、给父元素设置 overflow ：hidden ：  子元素超出的部分 隐藏
			            overflow ： auto ：  出现下拉进度条 
			  
			  2、给父元素不设置 height  ，只是给子元素设置height 
			    
			 
		-->
		<div class="div3">
			<span>哈哈哈</span> 
		
			<div class="div4">子元素</div>
		   
		</div>
	
	<!--
    	 问题2： 当div的内容超出div的高度 宽度时，内容不能完全被包裹
    	 解决办法： 方法1、不设置div的 height属性 ，让div高度自适应
    	                   方法2 ： 设置 display： table
    -->
	<div id="div5">
			包裹内容的情况下 　　这种情况下比较简单，内容的宽度按照内容计算，
			<br/>fdasfdsafds
		</div>
	</body>
</html>
